<div
  bsModal
  #actionModal="bs-modal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="actionModal"
  aria-hidden="true"
  [config]="{ backdrop: 'static' }"
>
  <div class="modal-dialog" style="max-width: 1024px">
    <div class="modal-content">
      <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()">
        <div class="modal-header">
          <h4 class="modal-title">
            <span>匹配工艺规程信息</span>
          </h4>
          <button
            type="button"
            class="close"
            (click)="close()"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body boundmonth">
          <div class="tech-doc-table" [busyIf]="primengTableHelper.isLoading">
            <div class="m-portlet" style="margin-top: -15px">
              <div class="m-portlet__head" style="height: 50px; padding: 15px">
                <div class="m-portlet__head-caption" style="width: 100%">
                  <div class="m-portlet__head-title">
                    <span class="m-portlet__head-icon">
                      <i class="fa fa-book"></i>
                    </span>
                    <h3 class="m-portlet__head-text">请选择工艺文件</h3>
                  </div>
                  <div
                    class="form-group m-form__group align-items-center mb-0 col-md-4"
                  >
                    <div class="m-input-icon m-input-icon--right">
                      <input
                        type="text"
                        name="filterText"
                        [(ngModel)]="filterText"
                        (keyup.enter)="getCharges()"
                        class="form-control m-input m-input--solid"
                        placeholder="Search..."
                      />
                      <span
                        class="m-input-icon__icon m-input-icon__icon--right"
                      >
                        <span (click)="getCharges()">
                          <i class="la la-search m--font-brand"></i>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding: 15px">
                <p-table
                  [value]="techDocs"
                  selectionMode="single"
                  [(selection)]="selectedTechDoc"
                  dataKey="codeId"
                  [scrollable]="true"
                  scrollHeight="200px"
                  (onRowSelect)="rowSelect()"
                >
                  <ng-template pTemplate="header">
                    <tr class="boundmonthtechheader">
                      <th style="width: 150px">编号</th>
                      <th style="width: 150px">编者</th>
                      <th style="width: 150px">时间</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-rowData>
                    <tr [pSelectableRow]="rowData" class="boundmonthtechbody">
                      <td style="width: 150px">
                        {{ rowData.codeId }}
                      </td>
                      <td style="width: 150px">
                        {{ rowData.editor }}
                      </td>
                      <td style="width: 150px">
                        {{ rowData.editTime | momentFormat: "YYYY-MM-DD" }}
                      </td>
                    </tr>
                  </ng-template>
                </p-table>
              </div>
            </div>

            <div class="m-portlet" style="margin-top: -30px">
              <div class="m-portlet__head" style="height: 50px; padding: 15px">
                <div class="m-portlet__head-caption">
                  <div class="m-portlet__head-title">
                    <span class="m-portlet__head-icon">
                      <i class="fa fa-database"></i>
                    </span>
                    <h3 class="m-portlet__head-text">材料信息</h3>
                  </div>
                </div>
              </div>
              <div style="padding: 15px">
                <!-- <div *ngFor="let rm of techDocView.materials"> -->
                <p-table [value]="techDocView.materials">
                  <ng-template pTemplate="header">
                    <tr class="boundmonthtechheader">
                      <th style="width: 25%; height: 30px; text-align: center">
                        图号
                      </th>
                      <th style="width: 25%; text-align: center">名称</th>
                      <th style="width: 25%; text-align: center">硬度</th>
                      <th style="width: 25%; text-align: center">备注</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-rowData>
                    <tr class="boundmonthtechbody">
                      <td style="text-align: center; height: 30px">
                        {{ techDocView.drawingCode }}
                      </td>
                      <td style="text-align: center">
                        {{ techDocView.drawingName }}
                      </td>
                      <th style="text-align: center">
                        {{ rowData.hardness }}
                      </th>
                      <td style="text-align: center">{{ rowData.remark }}</td>
                    </tr>
                  </ng-template>
                </p-table>

                <p-table [value]="techDocView.materials">
                  <ng-template pTemplate="header">
                    <tr class="boundmonthtechheader">
                      <th style="width: 13%; text-align: center">种类</th>
                      <th style="width: 25%; text-align: center">剖面尺寸</th>
                      <th style="width: 13%; text-align: center">长度</th>
                      <th style="width: 13%; text-align: center">数量</th>
                      <th style="width: 18%; text-align: center">单件质量kg</th>
                      <th style="width: 18%; text-align: center">全套质量kg</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-rowData>
                    <tr class="boundmonthtechbody">
                      <td style="text-align: center">
                        {{ rowData.category }}
                      </td>
                      <td style="text-align: center">{{ rowData.size }}</td>
                      <td style="text-align: center">{{ rowData.length }}</td>
                      <td style="text-align: center">
                        {{ rowData.productAmount }}
                      </td>
                      <td style="text-align: center">
                        {{ rowData.weightPerProduct }}
                      </td>
                      <td style="text-align: center">{{ rowData.weight }}</td>
                    </tr>
                  </ng-template>
                </p-table>
                <!-- </div> -->
              </div>
            </div>

            <!-- <div class="m-portlet" style="margin: -30px 0px 0px 0px">
              <div class="m-portlet__head" style="height: 50px; padding: 15px">
                <div class="m-portlet__head-caption">
                  <div class="m-portlet__head-title">
                    <span class="m-portlet__head-icon">
                      <i class="fa fa-cubes"></i>
                    </span>
                    <h3 class="m-portlet__head-text">
                      工序
                      <small style="float: right"> 额定工时 </small>
                    </h3>
                  </div>
                </div>
              </div>
              <div class="m-portlet__body" style="padding: 15px">
                <div class="m-widget4 m-widget4--chart-bottom row">
                  <div
                    class="m-widget4__item col-4"
                    *ngFor="let proc of techDocView.procs"
                  >
                    <div class="m-widget4__img" style="width: 25px">
                      <i
                        class="fa fa-angle-right blod m--font-success"
                        style="font-size: 18px"
                        >{{ proc.sequenceNumber }}</i
                      >
                    </div>
                    <div class="m-widget4__info" style="width: 60%">
                      <span class="m-widget4__text">
                        <div class="blod" style="font-size: 16px">
                          {{ proc.name }}
                        </div>
                      </span>
                    </div>
                    <span class="m-widget4__img">
                      <span class="m-widget4__text"
                        >{{ proc.chunk }} 小时
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </div>

        <div class="modal-footer">
          <button
            [disabled]="saving"
            type="button"
            class="btn btn-default"
            (click)="close()"
          >
            {{ l("Cancel") }}
          </button>
          <button
            type="submit"
            class="btn btn-primary blue"
            [disabled]="!selectedTechDoc?.codeId"
            [buttonBusy]="saving"
            [busyText]="'绑定中...'"
          >
            <i class="fa fa-check-circle"></i>
            <span>绑定</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
